<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
        <!-- 基于以上代码，实现如按钮中描述的功能：

        实现如阅读材料中，队列的相关入队、出队、获取队头、判空的操作
        队头对应数组中最后一个元素
        入队和出队操作后，需要在 id 为 queue-cont 的 p 标签中更新显示队列中的内容，队头在最右侧，中间用 -> 连接（练习使用数组的join方法） -->
    <input id="queue-input" type="text">
    <p id="queue-cont">队列内容：apple-&gt;pear</p>
    <button id="in-btn" >入队</button>
    <button id="out-btn">出队</button>
    <button id="font-btn">打印队头元素内容</button>
    <button id="empty-btn">判断队列是否为空</button>

   
    <script>

        var queue = ["apple", "pear"];
        var buttons = document.getElementsByTagName('button');
        var queueinput = document.getElementById('queue-input');
        var queuecont = document.getElementById('queue-cont');
        var inbtn = document.getElementById('in-btn');
        var outbtn = document.getElementById('out-btn');
        var fontbtn = document.getElementById('font-btn');
        var emptybtn = document.getElementById('empty-btn');
        
        
        buttons[0].addEventListener('click', function() {
          if(queueinput.value == ''){
                return false;
            }else{
                queue.unshift(queueinput.value);
                queuecont.innerHTML = '队列内容：'+queue.join('-&gt;'); 
            }

        })
        buttons[1].addEventListener('click', function() {
        
             queue.pop();
             queuecont.innerHTML = '队列内容：'+queue.join('-&gt;');
         })
         
         buttons[2].addEventListener('click', function() {
        
             queuecont.innerHTML = '队列内容：'+ queue[queue.length-1];
         })
         buttons[3].addEventListener('click', function() {
        
             if(queue.length == 0){
                queuecont.innerHTML = '队列为空';
             }else{
                 queuecont.innerHTML = '队列不为空';
             }
         })

    </script>
</body>

</html>